<template>
    <div class="charger-monitor">
      <h2>充电站监控</h2>
      
      <!-- 实时监控信息 -->
      <div class="monitor-info">
        <div class="station-status">
          <h3>充电站状态</h3>
          <p>总充电桩数：{{ totalChargers }}</p>
          <p>空闲充电桩：{{ idleChargers }}</p>
          <p>使用中充电桩：{{ activeChargers }}</p>
          <p>故障充电桩：{{ faultyChargers }}</p>
        </div>
      </div>
  
      <!-- 充电桩列表 -->
      <div class="charger-list">
        <table>
          <thead>
            <tr>
              <th>充电桩ID</th>
              <th>名称</th>
              <th>位置</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(charger, index) in chargers" :key="index">
              <td>{{ charger.id }}</td>
              <td>{{ charger.name }}</td>
              <td>{{ charger.location }}</td>
              <td :class="`status-${charger.status}`">{{ charger.status }}</td>
              <td>
                <button @click="simulateStatusChange(index)">模拟状态变化</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, computed, onMounted } from 'vue';
  
  export default defineComponent({
    name: 'ChargerMonitor',
    setup() {
      // 定义充电桩的类型
      interface Charger {
        id: number;
        name: string;
        location: string;
        status: string;
      }
  
      // 定义充电桩列表
      const chargers = ref<Charger[]>([
        {
          id: 1,
          name: '充电桩A',
          location: '停车场1',
          status: '空闲',
        },
        {
          id: 2,
          name: '充电桩B',
          location: '停车场2',
          status: '使用中',
        },
        {
          id: 3,
          name: '充电桩C',
          location: '停车场3',
          status: '故障',
        },
        {
          id: 4,
          name: '充电桩D',
          location: '停车场4',
          status: '空闲',
        },
        {
          id: 5,
          name: '充电桩E',
          location: '停车场5',
          status: '使用中',
        },
      ]);
  
      // 计算总充电桩数
      const totalChargers = computed(() => chargers.value.length);
  
      // 计算空闲充电桩数
      const idleChargers = computed(() => 
        chargers.value.filter(charger => charger.status === '空闲').length
      );
  
      // 计算使用中充电桩数
      const activeChargers = computed(() => 
        chargers.value.filter(charger => charger.status === '使用中').length
      );
  
      // 计算故障充电桩数
      const faultyChargers = computed(() => 
        chargers.value.filter(charger => charger.status === '故障').length
      );
  
      // 模拟状态变化
      const simulateStatusChange = (index: number) => {
        const statuses = ['空闲', '使用中', '故障'];
        const currentStatus = chargers.value[index].status;
        const nextStatusIndex = (statuses.indexOf(currentStatus) + 1) % statuses.length;
        chargers.value[index].status = statuses[nextStatusIndex];
      };
  
      return {
        chargers,
        totalChargers,
        idleChargers,
        activeChargers,
        faultyChargers,
        simulateStatusChange,
      };
    },
  });
  </script>
  
  <style scoped>
  .charger-monitor {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  
  .monitor-info {
    margin-bottom: 20px;
  }
  
  .station-status {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .charger-list table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .charger-list table th,
  .charger-list table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .charger-list table th {
    background-color: #f2f2f2;
  }
  
  .charger-list table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .charger-list table .status-空闲 {
    color: #4CAF50;
  }
  
  .charger-list table .status-使用中 {
    color: #FF9800;
  }
  
  .charger-list table .status-故障 {
    color: #FF5252;
  }
  
  .charger-list table td button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
  
  .charger-list table td button:hover {
    background-color: #45a049;
  }
  </style>